<template>
  <div class="app-container">
    <el-container :style="'height:'+containerHeight+'px'">
      <el-aside class="tree-area" @contextmenu.prevent.native="showMenu('',$event)">
        <el-tree
          :style="'height:'+containerHeight+'px'"
          highlight-current
          node-key="buildingId"
          ref="buildTree"
          :data="dataList"
          :props="menuListTreeProps"
          @node-click="selectBuild"
          default-expand-all
          :expand-on-click-node="false"
        ></el-tree>
      </el-aside>
      <el-main style="padding: 0px;width: 100%">
        <div class="bg-white scrollbar" :style="'margin-top: -20px;width:'+siderbarwidth">
          <div class="device-btn-box">
            <div class="radio-box">
                                            <a href="#"  :class="{'isccheck':tablechoose==='1','isblack':tablechoose=='2'}" @click="choosetab('1')">列表</a> |
                                            <a href="#"  :class="{'isccheck':tablechoose==='2','isblack':tablechoose=='1'}" @click="choosetab('2')">表格</a>
            </div>
          </div>

          <div class="device-list">

            <div v-for="param in meterdataList" :key="param.meterCode" class="device-item" style="height:100%" v-if="tablechoose==='1'">
                                            <span class="device-title" style="margin: 10px;border-bottom: 1px solid black;"><span>{{param.data.buildingName}}</span>{{param.data.deviceName}}</span>
                                            <div class="device-state" style="height:100%;margin-bottom: 10px;">
                                              <el-row :gutter="24" style="margin-top: 5px;">
                                                <el-col :span="12"><div style="margin-left: 10px">状态</div></el-col>
                                                <el-col :span="12"><div style="border:1px solid black;background-color: #6dbfff"><span style="margin-left: 10px;color: whitesmoke">123</span><span style="color: whitesmoke;float: right;margin-right: 10px">v</span></div></el-col>
                                              </el-row>
                                              <el-row :gutter="24" style="margin-top: 5px;">
                                                <el-col :span="12"><div style="margin-left: 10px">状态</div></el-col>
                                                <el-col :span="12"><div style="border:1px solid black;background-color: #6dbfff"><span style="margin-left: 10px;color: whitesmoke">123</span><span style="color: whitesmoke;float: right;margin-right: 10px">v</span></div></el-col>
                                              </el-row>
                                              <el-row :gutter="24" style="margin-top: 5px;">
                                                <el-col :span="12"><div style="margin-left: 10px">状态</div></el-col>
                                                <el-col :span="12"><div style="border:1px solid black;background-color: #6dbfff"><span style="margin-left: 10px;color: whitesmoke">123</span><span style="color: whitesmoke;float: right;margin-right: 10px">v</span></div></el-col>
                                              </el-row>
                                            </div>
            </div>


            <el-table v-if="tablechoose==='2'"
              :data="tabledataList"
              border
              :height="containerHeight"
              v-loading="dataListLoading"
              @selection-change="selectionChangeHandle"
              style="width: 100%;margin-top:15px;">
              <el-table-column
                type="selection"
                header-align="center"
                align="center"
                width="50">
              </el-table-column>
              <el-table-column
                prop="meterCode"
                header-align="center"
                align="center"
                label="计量器编号">
              </el-table-column>
              <el-table-column
                prop="meterName"
                header-align="center"
                align="center"
                label="计量器名称">
              </el-table-column>
              <el-table-column
                prop="collectType"
                header-align="center"
                align="center"
                label="采集类型">
                <template slot-scope="scope">
                  {{scope.row.collectType |collectTypeName(collectTypeList)}}
                </template>
              </el-table-column>

              <el-table-column
                prop="ctime"
                header-align="center"
                align="center"
                label="采集时间">
              </el-table-column>
              <el-table-column
                prop="oval"
                header-align="center"
                align="center"
                label="原始值">
                <template slot-scope="scope">
                  {{scope.row.oval }} ({{scope.row.collectType |collectTypeUtilName(collectTypeList)}})
                </template>
              </el-table-column>
            </el-table>
            <el-pagination  v-if="tablechoose==='2'"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>

          </div>
        </div>
      </el-main>
    </el-container>

  </div>
</template>

<script>
  import TableTreeColumn from "@/components/table-tree-column";
  import {treeDataTranslate} from "@/utils";
  import * as Util from "@/utils";

  export default {
    data() {
      return {
        collectTypeList:[],
        tablechoose: '1',
        wsUrl: '',
        websocket: null,
        actions: [{"name": '合闸', value: '0001'}, {"name": '拉闸', value: '0002'}],
        weekname: [{"name": '周日', value: '1'}, {"name": '周一', value: '2'}, {"name": '周二', value: '3'}, {
          "name": '周三',
          value: '4'
        }, {"name": '周四', value: '5'}, {"name": '周五', value: '6'},
          {"name": '周六', value: '7'}],
        oc: true,
        wendu: 26,
        allCheck: false,
        showType: "0",
        siderbarwidth: '95%',
        updateMenuNode: '',
        dataForm:{
          energyType:'',
          meterCodeName:'',
          meterCode:'',
          deviceName: ''
        },
        operType: '',
        oldobj: {},
        form: {
          workmodel: "",
          windstatu: "",
          doorstat: "",
          keylock: "",
          temperature: ""
        },
        dataFormBuild: {
          buildingId: "",
          buildingName: "",
          parentBuildingId: "-1",
          buildingType: "",
          buildingArea: "",
          buildingPersons: "",
          projectId: "",
          parentBuildingName: ""
        },
        showInfo: true,
        treeHeight: 200,
        containerHeight: 300,
        menuVisible: false,
        dataLoading: false,
        opmenuTitle: "模式设置",
        menuVisibledialog: false,
        dataList: [],
        tabledataList: [],
        meterdataList: [],
        sourceMeterdataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        addOrUpdateVisiblemeter: false,
        buildTypeList: [],
        projectList: [],
        menuListTreeProps: {
          label: "buildingName",
          children: "children"
        },
        currentNode: "",
        meterTypeList: [],
        subitemTypeList: [],
        subitemValueList: [],
        meterInfoList: [],
        currentbuildInfo: {},
        dataRule: {
          buildingName: [
            {required: true, message: "区域名称不能为空", trigger: "blur"}
          ],
          parentBuildingId: [
            {required: true, message: "所属区域不能为空", trigger: "blur"}
          ],
          buildingType: [
            {required: true, message: "区域类型不能为空", trigger: "blur"}
          ],
          buildingArea: [
            {required: true, message: "区域面积不能为空", trigger: "blur"}
          ],
          buildingPersons: [
            {required: true, message: "容纳人数不能为空", trigger: "blur"}
          ],
          projectId: [
            {required: true, message: "项目编号不能为空", trigger: "blur"}
          ]
        },
        viewVisile: false,
        viewData: {},
        meterCode: "",
        timedataListSelections: [],
        timeForm: {
          bid: '',
          title: '开关时间列表',
          show: false,
          dataList: [],
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
        },
        currentMeterNode: {},
        collectTypeValue: {
          '50002': { //开关机状态
            '0': '关机',
            '1': '开机'
          },
          '50004': { //工作模式
            '0': '空',
            '1': '自动',
            '2': '辅助加热',
            '3': '除湿',
            '4': '制热',
            '5': '制冷',
            '6': '通风',
            '7': '单地暖制热',
            '8': '地暖盘管同时'
          },
          '50005': { //风机状态
            '0': '停止',
            '1': '低速',
            '2': '中速',
            '3': '高速',
            '4': '自动',
            '5': '自动低速',
            '6': '自动中速',
            '7': '自动高速'
          },
          '50006': { //阀状态
            '0': '关阀',
            '1': '开阀'
          },
          '50007': { //键盘锁
            '0': '开锁',
            '1': '锁定',
            '2': '高级锁定'
          }
        }
      };
    },
    components: {
      TableTreeColumn
    },
    filters: {
      collectTypeName: function (value,statusList) {
        for(let i=0;i<statusList.length;i++){
          if(statusList[i].collectType===value){
            return statusList[i].collectName;
          }
        }
      },
      collectTypeUtilName: function (value,statusList) {
        for(let i=0;i<statusList.length;i++){
          if(statusList[i].collectType===value){
            return statusList[i].collectUnit;
          }
        }
      },
      colectName: function (value,statusList) {
        for(let i=0;i<statusList.length;i++){
          if(statusList[i].equiCode===value){
            return statusList[i].equiName+'['+statusList[i].equiCode+']';
          }
        }
      },

      actionName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].value === value) {
            return statusList[i].name;
          }
        }
      },
      // collectTypeNames: function(value,type) {
      //   return this.collectTypeValue[type][value]
      // },
      buildTypeName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].paramKey === value) {
            return statusList[i].paramValue;
          }
        }
      },
      projectName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].projectId === value) {
            return (
              statusList[i].projectName + "[" + statusList[i].projectId + "]"
            );
          }
        }
      },
      statusName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].value === value) {
            return statusList[i].label;
          }
        }
      },
      meterTypeName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].paramKey === value) {
            return statusList[i].paramValue;
          }
        }
      },
      materName: function (value, statusList) {
        for (let i = 0; i < statusList.length; i++) {
          if (statusList[i].meterCode === value) {
            return statusList[i].meterCode + "[" + statusList[i].meterAddr + "]";
          }
        }
      }
    },
    created() {
      this.queryCollectType()
      this.setContentHeight();
      // this.queryStatic("buildingType");
      // this.getProjectDataList();
      this.getDataList();
    },
    computed: {
      tableHeight() {
        return Util.getClientHeight() - 410;
      }
    },
    methods: {
      /**
       * 获取采集分项
       */
      queryCollectType() {
        let params = {
          'state': '1' ,
          "customerId":this.$util.cookies.get('customer_id'),
          'page': 1,
          'limit': 10000,
        }
       this.$api.okhttp({
          url: this.$http.adornUrl('/ecs/ecscollectitem/list'),
          method: 'get',
          params: this.$http.adornParams(params)
        }).then(data => {
          if (data && data.code === 0) {
          this.collectTypeList = data.page.list
        } else {
          this.collectTypeList = []
        }
      });
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 获取数据列表
      getTableDataList () {
       this.$api.okhttp({
          url: this.$http.adornUrl('/eda/intime'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'buildingId':this.currentbuildInfo.buildingId,
            'meterType':this.dataForm.energyType,
            'meterCode': this.dataForm.meterCode ,
            'projectId':this.$util.cookies.get("cuuren_projectId"),
            "customerId":this.$util.cookies.get('customer_id')
          })
        }).then(data => {
          if (data && data.code === 0) {
          this.tabledataList = data.data.list
          this.totalPage = data.data.totalCount
        } else {
          this.tabledataList = []
          this.totalPage = 0
        }
      })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getTableDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getTableDataList()
      },
      choosetab(val){
        this.tablechoose = val
        if(val==='1'){
          this.getmeterDataList();
        }else{
          this.getTableDataList()
        }
      },

      collectTypeNames(value, type) {
        return this.collectTypeValue[type][value]
      },
      showMenu(item, event) {
        // debugger
        // parameter.preventDefault()
        // var x = parameter.clientX
        // var y = parameter.clientY
        this.rightClick(event, item, '1')

      },

      closeViewVisible() {
        this.viewVisile = false;
      },
      getMeterDataList() {
       this.$api.okhttp({
          url: this.$http.adornUrl("/ecs/ecsmeterinfo/list"),
          method: "get",
          params: this.$http.adornParams({
            page: 1,
            limit: 10000000,
            customerId: this.$util.cookies.get("customer_id")
          })
        }).then(data => {
          if(data && data.code === 0
      )
        {
          this.meterInfoList = data.page.list;
        }
      else
        {
          this.meterInfoList = [];
        }
      })
        ;
      },
      /**
       * 获取浏览器高度
       */
      getClientHeight() {
        let height = 0;
        if (window.innerHeight) {
          height = window.innerHeight;
        }
        if (document.body && document.body.clientHeight) {
          height = document.body.clientHeight;
        }
        if (
          document.documentElement &&
          document.documentElement.clientHeight &&
          document.documentElement.clientWidth
        ) {
          height = document.documentElement.clientHeight;
        }
        return height;
      },
      setContentHeight() {
        let height = this.getClientHeight();
        this.containerHeight = height - 145;
        this.treeHeight = height - 105;
      },
      // 鼠标右击，通过右键弹出菜单操作节点
      rightClick(event, object, flag) {
        console.log(22222)
        this.updateMenuNode = object;
        // if (this.objectID !== object.id) {
        //   this.menuVisible = false
        // } else {
        this.menuVisible = true;
        // }
        document.addEventListener("click", e => {
          this.menuVisible = false;
      })
        ;
        let menu = document.querySelector("#rightClickMenu");
        // 菜单位置基于鼠标点击位置
        menu.style.left = event.clientX + "px";
        menu.style.top = event.clientY + "px";
        menu.style.position = "fixed";
        menu.style.width = "auto";
        menu.style.width = "auto";
        menu.style["z-index"] = "100";
      },
      selectBuild(data, node) {
        this.currentbuildInfo = data;
        this.currentNode = node;
        this.getmeterDataList();
        this.getTableDataList();
        this.showType = '0'
      },
      getProjectDataList() {
        console.log(2222)
       this.$api.okhttp({
          url: this.$http.adornUrl("/ecs/ecsprojectinfo/list"),
          method: "get",
          params: this.$http.adornParams({
            page: 1,
            limit: 10000000,
            customerId: this.$util.cookies.get("customer_id")
          })
        }).then((data) => {
          console.log(11111,data)
          if(data && data.code === 0)
        {
          this.projectList = data.page.list;
        }
      else
        {
          this.projectList = [];
        }
      })
        ;
      },
      /**
       * 获取参数枚举
       */
      queryStatic(type) {
       this.$api.okhttp({
          url: this.$http.adornUrl("/sys/sysstaticdata/getList"),
          method: "get",
          params: this.$http.adornParams({
            code: type,
            customerId: this.$util.cookies.get("customer_id")
          })
        }).then(data => {
          if(data && data.code === 0
      )
        {
          if (type === "meterType") {
            this.meterTypeList = data.page;
          } else if (type === "subitemType") {
            this.subitemTypeList = data.page;
          } else if (type === "subitemValue") {
            this.subitemValueList = data.page;
          } else if (type === "buildingType") {
            this.buildTypeList = data.page;
          }
        }
      })
        ;
      },
      // 获取数据列表
      getDataList(type) {
        console.log(2222)
        if (type) {
          this.pageIndex = 1
        }
       this.$api.okhttp({
          url: this.$http.adornUrl("/ecs/ecsbuildinginfo/select"),
          method: "get",
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize,
            key: this.dataForm.key,
            customerId: this.$util.cookies.get("customer_id"),
            'projectid': this.$util.cookies.get("cuuren_projectId")
          })
        }).then((data) => {
          console.log(11111,data)
          if(data && data.code === 0)
        {
          this.dataList = treeDataTranslate(
            data.menuList,
            "buildingId",
            "parentBuildingId"
          );
          this.currentbuildInfo = this.dataList[0];
          this.currentNode = this.dataList[0];

          this.$nextTick(() => {
            this.$refs.buildTree.setCurrentKey(this.currentbuildInfo.buildingId);
        })
          if(this.tablechoose==='1'){
            this.getmeterDataList();
          }else{
            this.getTableDataList()
          }
        }
      else
        {
          this.dataList = [];
        }
      })
        ;
      },
      // 获取关联计量器数据列表
      getmeterDataList(flag) {
        if (!this.currentNode || this.currentNode === "") {
          this.$message({
            message: "请先选择区域",
            type: "warning"
          });
          return;
        }

        if (flag) {
          this.pageIndex = 1
        }
        this.dataListLoading = true;
       this.$api.okhttp({
          url: this.$http.adornUrl("/temp/list"),
          method: "get",
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize,
            meterType: this.$meterType.TEMP_CTRL_DEVICE,
            buildingId: this.currentbuildInfo.buildingId,
            deviceName: this.dataForm.deviceName,
            meterCode: this.dataForm.meterCode,
            customerId: this.$util.cookies.get("customer_id")
          })
        }).then(data => {
          if(data && data.code === 0
      )
        {
          this.meterdataList = data.data;
          this.sourceMeterdataList = data.data;
          //this.totalPage = data.page.totalCount;
          ;
        }
      else
        {
          this.sourceMeterdataList = [];
          this.meterdataList = [];
         // this.totalPage = 0;
        }
        this.dataListLoading = false;
      })
        ;
      },
    },
    // beforeRouteLeave(to, from, next) {
    //   if (this.websocket) {
    //     // console.log("webSocketServer close");
    //     // this.websocket.close()
    //     next()
    //   }
    // }
  }
  ;
</script>
<style>
  .circle {
    width: 20px;
    height: 20px;
    background-color: #d6dddf;
    border: 1.5px solid;
    border-color: #BFC3C0;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
  }

  .button:before {
    content: "";
    width: 8px;
    height: 8px;
    display: block;
    z-index: -1;
    position: relative;
    background: #ddd;
    /*left: -15px;*/
    /*top: -15px;*/
    border-radius: 65px;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
  }

  .button:after, .button2:after {
    content: "";
    color: #09F;
    font-size: 20px;
    width: 100%;
    height: 100%;
    line-height: 8px;
    text-align: center;
    position: absolute;
    top: 0;
    display: block;
  }

  .button, .button2 {
    /*float: left;*/
    margin: 5px 5px 0px 0px;
    cursor: pointer;
    height: 18px;
    width: 18px;
    display: block;
    /*position: relative;*/
    color: black;
    text-align: center;
    line-height: 18px;
    border-radius: 50px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
    background: #d6dddf;
    transition: all 0.5s ease-in;
  }

  .tree-area { background-color: rgba(0, 0, 0, 0.1);
    width: 200px !important;
    /* box-shadow: 0px 0px 2px 2px #f7f6f6; */
    padding-top: 10px;
  }

  .icon-building {
    background: url("../../assets/img/home.png");
    background-size: cover;
  }

  .bg-white {
    box-shadow: 0px 0px 2px 2px #f7f6f6;
  }

  .el-tree-node__content {
    height: 30px !important;
  }

  .menuItem {
    box-shadow: 0px 0px 2px 2px #f7f6f6;
    height: 40px;
    line-height: 40px;
  }

  .el-form-item {
    margin-top: 20px;
  }

  a {
    text-decoration: none;
  }

  /*正常的未被访问过的链接*/
  a:link {
    text-decoration: none;
  }

  /*已经访问过的链接*/
  a:visited {
    text-decoration: none;
  }

  /*鼠标划过(停留)的链接*/
  a:hover {
    text-decoration: none;
  }

  /* 正在点击的链接*/
  a:active {
    text-decoration: none;
  }

  .el-dialog__body {

    overflow: hidden;

  }

  .isccheck{
    color: #6dbfff;
  }

  .isblack{
    color: black;
  }
</style>
